import type { Directive } from 'vue'
import './style.css'
// 水波纹
type EventType = Event & MouseEvent & TouchEvent;
interface BindFunc {
  (el: HTMLElement): void;
}
type Directivedom = Directive & {
  bind: BindFunc,
  inserted: BindFunc
}
const vueWater = {}
// 使用局部指令运用生命周期是vue页面的生命周期
const RippleDirective: Directivedom = {
    beforeMount(el: HTMLElement, binding) {
        if (binding.value == false) return
        el.addEventListener('mousedown', (event: EventType) => {
            const targetBorder = parseInt(getComputedStyle(el).borderWidth.replace('px', ''))
            const clientX = event.pageX || event.touches[0].pageX
            const clientY = event.pageY || event.touches[0].pageY
            const rect = el.getBoundingClientRect()
            const style = window.getComputedStyle(el)
            const { left, top } = rect
            const { offsetWidth: width, offsetHeight: height } = el
            const dx = clientX - left // 获取点击的位置到当前dom的最左边的距离
            const dy = clientY - top
            const border = targetBorder > 0 ? targetBorder : 0
            const ripple = document.createElement('div')
            const rippleContent = document.createElement('div')
            const zIndex = ''
            const background = ''
            // 时间与宽高自适应
            const transition = Math.max(width, height)
            // 空值合并操作符 ?? 当左侧为空 返回右侧
            // 添加初始化样式
            Object.assign(ripple.style ?? {}, {
                top: dy - 5 + 'px',
                left: dx - 5 + 'px',
                width: '10px',
                height: '10px',
                borderRadius: '50%',
                transition: `all ${transition}ms cubic-bezier(0.4, 0, 0.2, 1) 0s`,
                pointerEvents: 'none',
                position: 'relative',
                zIndex: '9999',
                backgroundColor: 'rgba(0, 0, 0, 0.12)',
            })
            Object.assign(rippleContent.style ?? {}, {
                position: 'absolute',
                left: `${0 - border}px`,
                top: `${0 - border}px`,
                height: '0',
                width: '0',
                pointerEvents: 'none',
                overflow: 'hidden',
            })
            // 将需要添加的dom设置相对定位
            el.style.position = 'relative'
            // 挂载
            ripple.className = 'ripple'
            rippleContent.appendChild(ripple)
            el.appendChild(rippleContent)
            const {
                borderTopLeftRadius,
                borderTopRightRadius,
                borderBottomLeftRadius,
                borderBottomRightRadius,
            } = style
            Object.assign(rippleContent.style, {
                width: `${width}px`,
                height: `${height}px`,
                direction: 'ltr',
                borderTopLeftRadius,
                borderTopRightRadius,
                borderBottomLeftRadius,
                borderBottomRightRadius,
            })
            setTimeout(() => {
                const wh = width > height ? width * 2 + 'px' : height * 2 + 'px'
                Object.assign(ripple.style ?? {}, {
                    // 为了全部覆盖 宽高为父元素的二倍
                    width: wh,
                    height: wh,
                    // 中心位置需要自身的一半
                    left: dx - parseInt(wh) / 2 + 'px',
                    top: dy - parseInt(wh) / 2 + 'px',
                })
            }, 0)
            // 为了不影响页面性能 850ms后自动移除
            function clearRipple() {
                setTimeout(() => {
                    ripple.style.backgroundColor = 'rgba(0, 0, 0, 0)'
                }, 250)
                setTimeout(() => {
                    rippleContent?.parentNode?.removeChild(rippleContent)
                }, 850)
            }
            if (event.type === 'mousedown') {
                // 如果点击了 移出去
                el.addEventListener('mouseup', clearRipple, false)
                el.addEventListener('mouseleave', clearRipple, false)
            } else {
                clearRipple()
            }
        })
    },
  
    updated(el) {
    //  更新触发由于前面已经存在清除
    },
}
// 使用局部组件 直接将其导出添加使用 v-ripple
/**
 * 
 * directives:{
     Ripple:RippleDirective
  },
  使用案例
  <div class="wart"  v-ripple>chart</div>
 */
export default RippleDirective